<template>
  <!-- 热门推荐 -->
  <section id="featured" class="py-16 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex flex-col md:flex-row md:items-end justify-between mb-12">
        <div>
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark"
            >热门推荐</h2
          >
          <p class="mt-4 text-neutral max-w-2xl"
            >本月最受欢迎的乐谱，由我们的用户和专业音乐家精选</p
          >
        </div>
        <div class="mt-4 md:mt-0 flex space-x-2">
          <button
            id="prevSlide"
            class="w-10 h-10 rounded-full border border-gray-300 flex items-center justify-center hover:bg-gray-50 transition-colors"
          >
            <i class="fa fa-chevron-left text-neutral"></i>
          </button>
          <button
            id="nextSlide"
            class="w-10 h-10 rounded-full border border-gray-300 flex items-center justify-center hover:bg-gray-50 transition-colors"
          >
            <i class="fa fa-chevron-right text-neutral"></i>
          </button>
        </div>
      </div>

      <div class="relative">
        <div
          id="featuredSlider"
          class="flex overflow-x-auto scrollbar-hide snap-x snap-mandatory pb-6 gap-6"
        >
          <!-- 乐谱卡片 1 -->
          <div
            class="min-w-[280px] sm:min-w-[300px] bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-custom snap-start group"
          >
            <div class="relative">
              <img
                src="https://picsum.photos/400/300?random=30"
                alt="肖邦夜曲全集"
                class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <div class="absolute top-3 right-3">
                <span
                  class="inline-block px-2 py-1 bg-secondary text-white text-xs font-medium rounded-full"
                  >畅销</span
                >
              </div>
            </div>
            <div class="p-4">
              <div class="flex justify-between items-start mb-2">
                <h3
                  class="font-semibold text-dark group-hover:text-primary transition-colors"
                  >肖邦夜曲全集</h3
                >
                <span class="font-bold text-primary">¥128</span>
              </div>
              <p class="text-sm text-neutral mb-3">钢琴 • 古典</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <div class="flex text-yellow-400 text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                  </div>
                  <span class="ml-1 text-xs text-neutral">(124)</span>
                </div>
                <button
                  class="p-2 bg-primary/10 text-primary rounded-full hover:bg-primary hover:text-white transition-colors"
                >
                  <i class="fa fa-shopping-cart"></i>
                </button>
              </div>
            </div>
          </div>

          <!-- 乐谱卡片 2 -->
          <div
            class="min-w-[280px] sm:min-w-[300px] bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-custom snap-start group"
          >
            <div class="relative">
              <img
                src="https://picsum.photos/400/300?random=31"
                alt="流行钢琴精选集"
                class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <div class="absolute top-3 right-3">
                <span
                  class="inline-block px-2 py-1 bg-green-500 text-white text-xs font-medium rounded-full"
                  >新品</span
                >
              </div>
            </div>
            <div class="p-4">
              <div class="flex justify-between items-start mb-2">
                <h3
                  class="font-semibold text-dark group-hover:text-primary transition-colors"
                  >流行钢琴精选集</h3
                >
                <span class="font-bold text-primary">¥89</span>
              </div>
              <p class="text-sm text-neutral mb-3">钢琴 • 流行</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <div class="flex text-yellow-400 text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-half-o"></i>
                  </div>
                  <span class="ml-1 text-xs text-neutral">(98)</span>
                </div>
                <button
                  class="p-2 bg-primary/10 text-primary rounded-full hover:bg-primary hover:text-white transition-colors"
                >
                  <i class="fa fa-shopping-cart"></i>
                </button>
              </div>
            </div>
          </div>

          <!-- 乐谱卡片 3 -->
          <div
            class="min-w-[280px] sm:min-w-[300px] bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-custom snap-start group"
          >
            <div class="relative">
              <img
                src="https://picsum.photos/400/300?random=32"
                alt="小提琴协奏曲精选"
                class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
              />
            </div>
            <div class="p-4">
              <div class="flex justify-between items-start mb-2">
                <h3
                  class="font-semibold text-dark group-hover:text-primary transition-colors"
                  >小提琴协奏曲精选</h3
                >
                <span class="font-bold text-primary">¥159</span>
              </div>
              <p class="text-sm text-neutral mb-3">小提琴 • 古典</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <div class="flex text-yellow-400 text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-o"></i>
                  </div>
                  <span class="ml-1 text-xs text-neutral">(76)</span>
                </div>
                <button
                  class="p-2 bg-primary/10 text-primary rounded-full hover:bg-primary hover:text-white transition-colors"
                >
                  <i class="fa fa-shopping-cart"></i>
                </button>
              </div>
            </div>
          </div>

          <!-- 乐谱卡片 4 -->
          <div
            class="min-w-[280px] sm:min-w-[300px] bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-custom snap-start group"
          >
            <div class="relative">
              <img
                src="https://picsum.photos/400/300?random=33"
                alt="吉他弹唱流行金曲"
                class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <div class="absolute top-3 right-3">
                <span
                  class="inline-block px-2 py-1 bg-red-500 text-white text-xs font-medium rounded-full"
                  >折扣</span
                >
              </div>
            </div>
            <div class="p-4">
              <div class="flex justify-between items-start mb-2">
                <h3
                  class="font-semibold text-dark group-hover:text-primary transition-colors"
                  >吉他弹唱流行金曲</h3
                >
                <div>
                  <span class="font-bold text-primary">¥69</span>
                  <span class="text-sm text-neutral line-through ml-1"
                    >¥99</span
                  >
                </div>
              </div>
              <p class="text-sm text-neutral mb-3">吉他 • 流行</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <div class="flex text-yellow-400 text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                  </div>
                  <span class="ml-1 text-xs text-neutral">(156)</span>
                </div>
                <button
                  class="p-2 bg-primary/10 text-primary rounded-full hover:bg-primary hover:text-white transition-colors"
                >
                  <i class="fa fa-shopping-cart"></i>
                </button>
              </div>
            </div>
          </div>

          <!-- 乐谱卡片 5 -->
          <div
            class="min-w-[280px] sm:min-w-[300px] bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-custom snap-start group"
          >
            <div class="relative">
              <img
                src="https://picsum.photos/400/300?random=34"
                alt="巴赫平均律钢琴曲集"
                class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
              />
            </div>
            <div class="p-4">
              <div class="flex justify-between items-start mb-2">
                <h3
                  class="font-semibold text-dark group-hover:text-primary transition-colors"
                  >巴赫平均律钢琴曲集</h3
                >
                <span class="font-bold text-primary">¥139</span>
              </div>
              <p class="text-sm text-neutral mb-3">钢琴 • 古典</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <div class="flex text-yellow-400 text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-half-o"></i>
                  </div>
                  <span class="ml-1 text-xs text-neutral">(112)</span>
                </div>
                <button
                  class="p-2 bg-primary/10 text-primary rounded-full hover:bg-primary hover:text-white transition-colors"
                >
                  <i class="fa fa-shopping-cart"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup></script>

<style></style>
